<template>
  <view class="cart-bottom-box">
    <view class="cart-bottom-wrap">
      <view class="select" @click="selectAllProduct">
        <uni-icons :type="isAllSelected ? 'checkbox-filled' : 'circle'" size="24" :color="isAllSelected ? '#222' : '#aaa'"></uni-icons>
        <text class="text">{{ $t('cart.select_all') }}</text>
      </view>
      <view class="cart-right">
        <view class="cart-info">
          <view class="total-wrap">
            {{ $t('cart.t_total') }}:
            <text class="total">{{ total }}</text>
          </view>
          <view class="quantity">{{ proxy.$util.replaceI18n('cart.selected_items', {num: quantity}) }}</view>
        </view>
        <view class="to-checkout" @click="toCheckout">{{ $t('cart.to_checkout') }}</view>
      </view>
    </view>
    <view :style="tabBarPlaceholder"></view>
  </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()

const props = defineProps({
  total: {
    type: String,
    default: '',
  },
  quantity: {
    type: Number,
    default: 0,
  },
  isAllSelected: {
    type: Boolean,
    default: false,
  },
  ids: {
    type: Array,
    default: () => [],
  },
})

const tabBarPlaceholder = computed(() => {
  return {
    height: 50 + uni.getWindowInfo().safeAreaInsets.bottom + 'px',
  }
})

const selectAllProduct = () => {
  proxy.$http.put(`carts/${props.isAllSelected ? 'unselect' : 'select'}`, {cart_ids: props.ids}).then(res => {
    proxy.$emit('change', res.data)
  })
}

const toCheckout = () => {
  if (props.quantity === 0) {
    proxy.$util.msg('请选择商品')
    return
  }
  uni.navigateTo({
    url: '/pages/checkout/index',
  })
}
</script>

<style lang="scss" scoped>
.cart-bottom-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cart-bottom-wrap {
  display: flex;
  padding: 0 10px;
  height: 50px;
  align-items: center;
  justify-content: space-between;

  .select {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333;
    .text {
      margin-left: 3px;
    }
    uni-icons {
      margin-right: 5px;
    }
  }

  .cart-right {
    display: flex;
    align-items: center;
    justify-content: center;
    .cart-info {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      line-height: 1;

      .total {
        font-size: 32rpx;
        font-weight: bold;
        color: $primary;
      }

      .quantity {
        font-size: 24rpx;
        margin-top: 5px;
        color: #999;
      }
    }

    .to-checkout {
      width: 100px;
      height: 38px;
      margin-left: 10px;
      line-height: 38px;
      text-align: center;
      background-color: $primary;
      color: #fff;
      // border-radius: 20px;
      font-size: 14px;
      &:active {
        background-color: #000;
      }
    }
  }
}
</style>
